<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 toastr 插件的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <!-- 引入 toastr 插件的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <title>商品列表</title>
    <style>
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        /* 新增样式 */
        .quantity-buttons {
            display: flex;
            align-items: center;
        }

        .quantity-buttons button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            padding: 0;
            font-size: 16px;
        }

        .quantity-buttons span {
            width: 50px;
            text-align: center;
            margin: 0 10px;
        }

        /* 新增样式，用于按钮容器 */
        .button-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }

        /* 新增样式，用于分页导航居中 */
        #pagination {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        #pagination button {
            margin: 0 5px;
        }

        #pagination span {
            margin: 0 5px;
            line-height: 36px; /* 根据按钮高度调整，使文字垂直居中 */
        }

        /* 自定义 toastr 成功提示框的样式 */
        .toastr-success {
            background-color: #28a745; /* 绿色背景 */
        }
        .toastr-success::before {
            content: "\f00c"; /* 打钩图标 Unicode */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            margin-right: 10px;
        }
    </style>
</head>

<body>
<h1>商品列表</h1>
<table id="productTable">
    <thead>
    <tr>
        <th>商品 ID</th>
        <th>商品名称</th>
        <th>商品描述</th>
        <th>价格</th>
        <th>图片</th>
        <th>购物车</th>
        <th>查看评价</th> <!-- 新增表头列 -->
    </tr>
    </thead>
    <tbody>
    <!-- 这里将通过 JavaScript 动态添加商品数据 -->
    </tbody>
</table>
<!-- 新增按钮容器 -->
<div class="button-container">
    <button id="submitCart">提交购物车</button>
</div>
<!-- 分页导航 -->
<div id="pagination">
    <button id="prevPage">上一页</button>
    <span id="pageInfo"></span>
    <button id="nextPage">下一页</button>
</div>

<script>
    let currentPage = 1;
    const pageSize = 3;
    const queryString = '';
    let totalPages = 0;

    function loadPage(page) {
        const param = {
            currentPage: page,
            pageSize: pageSize,
            queryString: queryString
        };

        $.ajax({
            url: '/Main/findPage.do',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(param),
            dataType: 'json',
            success: function (result) {
                const tableBody = $('#productTable tbody');
                tableBody.empty();

                result.rows.forEach(product => {
                    const row = $('<tr></tr>');
                    const idCell = $('<td></td>').text(product.product_id);
                    row.append(idCell);
                    const nameCell = $('<td></td>').text(product.product_name);
                    row.append(nameCell);
                    const descriptionCell = $('<td></td>').text(product.description);
                    row.append(descriptionCell);
                    const priceCell = $('<td></td>').text(product.price);
                    row.append(priceCell);
                    const imageCell = $('<td></td>');
                    const img = $('<img>').attr({
                        src: product.image_url,
                        alt: product.product_name,
                        width: 100
                    });
                    imageCell.append(img);
                    row.append(imageCell);
                    const actionCell = $('<td></td>');
                    const quantityButtons = $('<div class="quantity-buttons"></div>');
                    const reduceButton = $('<button>-</button>');
                    reduceButton.click(function () {
                        const productId = product.product_id;
                        const token = getCookie('jwtToken');
                        const quantity = parseInt($(this).siblings('span').text());
                        if (token) {
                            $.ajax({
                                url: '/order/reduceShoppingCart',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify({
                                    productId: productId,
                                    token: token,
                                    quantity: quantity
                                }),
                                dataType: 'json',
                                success: function (response) {
                                    if (response.success) {
                                        // 使用 toastr 显示成功提示
                                        toastr.success('减少购物车商品成功');
                                        // 更新显示的数量
                                        $(reduceButton).siblings('span').text(response.newQuantity);
                                    } else {
                                        // 使用 toastr 显示错误提示
                                        toastr.error('减少购物车商品失败: ' + response.message);
                                        console.error('减少购物车商品失败:', response.message);
                                    }
                                },
                                error: function (error) {
                                    // 使用 toastr 显示错误提示
                                    toastr.error('减少购物车商品失败: ' + error.statusText);
                                    console.error('减少购物车商品失败:', error);
                                }
                            });
                        } else {
                            // 使用 toastr 显示错误提示
                            toastr.error('未找到 JWT Token');
                            console.error('未找到 JWT Token');
                        }
                    });
                    quantityButtons.append(reduceButton);
                    const quantitySpan = $('<span></span>');
                    // 初始化时获取购物车数量
                    const productId = product.product_id;
                    const token = getCookie('jwtToken');
                    if (token) {
                        $.ajax({
                            url: '/order/getShoppingCartQuantity',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify({
                                productId: productId,
                                token: token
                            }),
                            dataType: 'json',
                            success: function (response) {
                                if (response.success) {
                                    // 更新显示的数量
                                    quantitySpan.text(response.quantity);
                                } else {
                                    // 使用 toastr 显示错误提示
                                    toastr.error('获取购物车数量失败: ' + response.message);
                                    console.error('获取购物车数量失败:', response.message);
                                }
                            },
                            error: function (error) {
                                // 使用 toastr 显示错误提示
                                toastr.error('获取购物车数量失败: ' + error.statusText);
                                console.error('获取购物车数量失败:', error);
                            }
                        });
                    } else {
                        // 使用 toastr 显示错误提示
                        toastr.error('未找到 JWT Token');
                        console.error('未找到 JWT Token');
                    }
                    quantityButtons.append(quantitySpan);
                    const addButton = $('<button>+</button>');
                    addButton.click(function () {
                        const productId = product.product_id;
                        const token = getCookie('jwtToken');
                        const quantity = parseInt($(this).siblings('span').text());
                        if (token) {
                            $.ajax({
                                url: '/order/addshoppingcart',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify({
                                    productId: productId,
                                    token: token,
                                    quantity: quantity + 1
                                }),
                                dataType: 'json',
                                success: function (response) {
                                    if (response.success) {
                                        // 使用 toastr 显示成功提示
                                        toastr.success('加入购物车成功');
                                        // 更新显示的数量
                                        $(addButton).siblings('span').text(response.newQuantity);
                                    } else {
                                        // 使用 toastr 显示错误提示
                                        toastr.error('加入购物车失败: ' + response.message);
                                        console.error('加入购物车失败:', response.message);
                                    }
                                },
                                error: function (error) {
                                    // 使用 toastr 显示错误提示
                                    toastr.error('加入购物车失败: ' + error.statusText);
                                    console.error('加入购物车失败:', error);
                                }
                            });
                        } else {
                            // 使用 toastr 显示错误提示
                            toastr.error('未找到 JWT Token');
                            console.error('未找到 JWT Token');
                        }
                    });
                    quantityButtons.append(addButton);
                    actionCell.append(quantityButtons);
                    row.append(actionCell);

                    // 新增查看评价按钮
                    const reviewButtonCell = $('<td></td>');
                    const reviewButton = $('<button>查看评价</button>');
                    reviewButton.click(function () {
                        // 跳转到 reviews.html 页面，并传递商品 ID 参数
                        window.location.href = `reviews.html?productId=${product.product_id}`;
                    });
                    reviewButtonCell.append(reviewButton);
                    row.append(reviewButtonCell);

                    tableBody.append(row);
                });

                totalPages = Math.ceil(result.total / pageSize);
                $('#pageInfo').text(`第 ${page} 页，共 ${totalPages} 页`);
            },
            error: function (error) {
                // 使用 toastr 显示错误提示
                toastr.error('请求出错: ' + error.statusText);
                console.error('请求出错:', error);
            }
        });
    }

    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    function initProductList() {
        currentPage = 1;
        loadPage(currentPage);

        $('#prevPage').click(function () {
            if (currentPage > 1) {
                currentPage--;
                loadPage(currentPage);
            }
        });

        $('#nextPage').click(function () {
            if (currentPage < totalPages) {
                currentPage++;
                loadPage(currentPage);
            }
        });
    }

    // 定义 getOrder 方法
    function getOrder() {
        const token = getCookie('jwtToken');
        if (!token) {
            toastr.error('未找到 JWT Token');
            console.error('未找到 JWT Token');
            return;
        }

        // 显示加载提示
        toastr.info('正在提交购物车，请稍候...');

        $.ajax({
            url: '/order/getOrder',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ token: token }),
            dataType: 'json',
            success: function (data) {
                // 处理订单数据，这里可以根据需要添加更多逻辑
                console.log('订单数据:', data);
                // 显示成功提示
                toastr.success('购物车提交成功');
            },
            error: function (error) {
                toastr.error('获取订单数据失败: ' + error.statusText);
                console.error('获取订单数据失败:', error);
                // 显示失败提示
                toastr.error('购物车提交失败');
            }
        });
    }

    // 为提交购物车按钮绑定点击事件
    $(document).ready(function () {
        initProductList();
        $('#submitCart').click(getOrder);
    });
</script>
</body>

</html>